<%--
  Created by IntelliJ IDEA.
  User: jali
  Date: 2019/1/27
  Time: 15:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<jsp:include page="/common.jsp"></jsp:include>
<head>
    <title>积分兑换</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
</head>
<body>

<img src="${APP_PATH}/img/title.png">

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="${APP_PATH}/getTaskItems">我的积分</a></li>
                <li class="active"><a href="${APP_PATH}/jaAwardList">积分兑换</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-11" >
            <h1>我的积分：<span id="myScore" style="vertical-align: bottom;"></span></h1>
        </div>
        <div class="col-md-1" style="top:45px">
            <span><a href="${APP_PATH}/jaScoreUseList" >历史记录</a></span>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">积分兑换</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group" id="group_name">
                            <label class="col-sm-2 control-label">兑换商品</label>
                            <div class="col-sm-10">
                                <p class="form-control-static"></p>
                            </div>
                        </div>
                        <div class="form-group" id="group_score">
                            <label class="col-sm-2 control-label">所需积分</label>
                            <div class="col-sm-10">
                                <p class="form-control-static"></p>
                            </div>
                        </div>
                        <div class="form-group" id="group_inventroy">
                            <label class="col-sm-2 control-label">剩余数量</label>
                            <div class="col-sm-10">
                                <p class="form-control-static"></p>
                            </div>
                        </div>
                        <div class="form-group" id="group_myScore">
                            <label class="col-sm-2 control-label">您的积分</label>
                            <div class="col-sm-10">
                                <p class="form-control-static"></p>
                            </div>
                        </div>
                        <div class="form-group" id="group_convertible">
                            <label class="col-sm-2 control-label">您可兑换</label>
                            <div class="col-sm-10">
                                <p class="form-control-static"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">您想兑换</label>
                            <div class="col-sm-2 input-group">
                                <input type="text" name="inventory" id="inputInventory" class="form-control" style="text-align: right;" value="1"/>
                                <span class="input-group-addon">个</span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="award_save_btn">确认兑换</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="showMsgModel" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">提示信息</h4>
                </div>
                <div class="modal-body">
                    <p id="msg_model"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row" id="jaAward_area">
        
    </div>
</div>

<script type="text/javascript">

    //全局变量总记录数
    var recordTotal;
    //当前页码
    var pageNum;

    //1、页面加载完成后，直接去发送ajax请求，要到分页数据
    $(function () {
        //页面第一次加载
        showMyScore();
        //加载数据
        showJaAward();
    });

    function showMyScore(){
        $.ajax({
            url:"${APP_PATH}/getMyScore",
            type:"GET",
            success:function (result) {
                var myScore = result.extend.score;
                $("#myScore").text(myScore);
            }

        })
    }
    
    function showJaAward() {
        $.ajax({
            url:"${APP_PATH}/getAwardList",
            type:"GET",
            success:function (result) {
                build_jaAward_info(result);
            }
        })
    }

    function build_jaAward_info(result) {
        var jaAwardNode = $("#jaAward_area");
        jaAwardNode.empty();
        var awards = result.extend.pageInfo.list;
        $.each(awards,function (index,award) {
            var divNode = $("<div></div>").addClass("col-sm-6 col-md-3");
            var thumbnailNode = $("<div></div>").addClass("thumbnail");
            var imgNode = $("<img>").attr("src","${APP_PATH}"+award.imgpath);
            var captionDiv = $("<div></div>").addClass("caption");
            var h3Node = $("<h3></h3>").append(award.name);
            var rowDiv = $("<div></div>").addClass("row");
            var scoreDiv = $("<div></div>").addClass("col-md-5").append("积分：" + award.score);
            scoreDiv.appendTo(rowDiv);
            var amountDiv = $("<div></div>").addClass("col-md-7").append("数量：" + award.leftInve + "/" + award.inventory);
            amountDiv.appendTo(rowDiv);
            var pDiv = $("<p> </p>");
            var aRowDiv = $("<div></div>").addClass("row");
            var convDiv = $("<div></div>").addClass("col-md-3");
            var convHref = $("<a></a>").addClass("btn btn-primary conv_btn").attr("role","button").append("兑换");
            convHref.attr("edit-id",award.id);
            convHref.appendTo(convDiv);
            var detalDiv = $("<div></div>").addClass("col-md-9");
            var detaHref = $("<a></a>").addClass("btn btn-default").attr("role","button").append("详细");
            detaHref.appendTo(detalDiv);
            aRowDiv.append(convDiv).append(detalDiv);
            captionDiv.append(h3Node).append(rowDiv).append(pDiv).append(aRowDiv);
            thumbnailNode.append(imgNode).append(captionDiv);
            divNode.append(thumbnailNode);
            divNode.appendTo(jaAwardNode);
        })
    }

    function getAward(id) {
        $.ajax({
            url:"${APP_PATH}/getAward/"+id,
            type:"GET",
            success:function (result) {
                build_myModel(result);
            }
        })
    }

    function build_myModel(result){
        var jaAward = result.extend.jaAward;
        $("#group_name").find("p").text(jaAward.name);
        $("#group_score").find("p").text(jaAward.score+"分");
        $("#group_inventroy").find("p").text(jaAward.leftInve+"个");
        $("#group_myScore").find("p").text(result.extend.myScore+"分");
        $("#group_convertible").find("p").text(result.extend.convertible+"个");
        $("#award_save_btn").attr("edit-id",jaAward.id);
    }

    $(document).on("click",".conv_btn",function () {
        var id = $(this).attr("edit-id");
        getAward(id);
        $("#myModal").modal({
            //点击框外的区域不会关闭弹框
            backdrop : "static"
        });
    });

    $("#award_save_btn").click(function () {
        $.ajax({
            url:"${APP_PATH}/convAward/"+$(this).attr("edit-id"),
            type:"PUT",
            data:$("#myModal form").serialize(),
            success:function (result) {
                $("#msg_model").text(result.extend.va_msg);
                if("100"==result.code){//兑换成功
                    $("#myModal").modal("hide");
                    $("#showMsgModel").modal({
                        //点击框外的区域不会关闭弹框
                        backdrop : "static"
                    });
                    //刷新数据
                    showMyScore();
                    showJaAward();
                }else{
                    $("#showMsgModel").modal({
                        //点击框外的区域不会关闭弹框
                        backdrop : "static"
                    });
                }
            }
        })
    });

    function show_validate_smg(ele,status,msg){
        $(ele).parent().removeClass("has-error has-success");
    }
</script>
</body>
</html>
